<template>
  <div class="home-container">

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="title-section">
        <h1 class="main-title1">非遗里的中国</h1>
        <h1 class="main-title2">——中国体质文化、中国茶文化</h1>
      </div>
      
      <div class="content-layout">
        <!-- 左侧内容区域 -->
        <div class="left-content">
          <p class="subtitle">为全面系统提升全民健康素养，进一步推动卫生健康工作从"以治病为中心"向"以健康为中心"转变，国家卫生健康委、国家中医药局、国家疾控局决定联合开展"全民健康素养提升三年行动"（2024-2027）。</p>
          <!-- <p class="subtitle">为全面系统提升全民健康素养，国家卫生健康委、国家中医药局、国家疾控局决定联合开展"全民健康素养提升三年行动"（2024-2027）。</p> -->
          <p class="subtitle">通过数据分析，我们将针对您的体质为您推荐合适的茶饮，利用茶文化进行体质健康管理模式的创新，为您解锁新型的养生密码。</p>
        </div>
        
        <!-- 右侧菱形布局 -->
        <div class="right-content">
          <div class="diamond-layout" @mouseenter="pauseCarousel" @mouseleave="resumeCarousel"> 
            <!-- 上方菱形 -->
            <div class="diamond-button top">
              <div class="diamond-content" @click="toTest">
                <h3>体质测试</h3>
                <p>通过测试了解您的体质类型</p>
              </div>
            </div>
            
            <!-- 左侧菱形 -->
            <div class="diamond-button left">
              <div class="diamond-content" @click="toView">
                <h3>中医体质理论</h3>
                <p>中医中对九大体质的归纳与描述</p>
              </div>
            </div>
            
            <!-- 中央内容 -->
            <!-- <div class="center-content">
              <div class="center-diamond">
                <h2>中国体质文化</h2>
                <p>解锁新型养生密码</p>
              </div>
            </div> -->
            
            <!-- 右侧菱形 -->
            <div class="diamond-button right">
              <div class="diamond-content" @click="toTeaDashboard">
                <h3>茶饮仪表盘</h3>
                <p>探索中国茶文化的数字世界</p>
              </div>
            </div>
            
            <!-- 下方菱形 -->
            <div class="diamond-button bottom">
              <div class="diamond-content" @click="toFive">
                <h3>五行与体质</h3>
                <p>中医体质与传统五行紧密相连</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部版权信息区域 -->
    <div class="footer">
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const showPhysique = ref(false)
const showTea = ref(false)

const router = useRouter()
const showPhysiqueCarousel = () => {
  showPhysique.value = true
  showTea.value = false
}

function toView(name) {
  router.push({
    name: 'physique'
  })
}
function toFive(){
  router.push({
    name: 'wuXingChart'
  })
}
function toTest(name) {
  router.push({
    name: 'test',
    query: { physique: name }
  })
}
function toTeaDashboard(){
  router.push({
    name: 'teaDashboard'
  })
}
function toTea(name) {
  router.push({
    name: 'tea',
    query: { physique: name }
  })
}
const showTeaCarousel = () => {
  showTea.value = true
  showPhysique.value = false
}

// 用于轮播展示的体质数据
const diamondData = [
  { name: '平和质', description: '阴阳气血调和，体态适中，面色红润，精力充沛，舌色淡红，苔薄白。' },
  { name: '气虚质', description: '元气不足，以疲乏、气短、自汗、气虚。' },
  { name: '阳虚质', description: '阳气不足，以畏寒怕冷、手足不温、虚寒。' },
  { name: '阴虚质', description: '阴液亏少，以口燥咽干、手足心热、虚热。' },
  { name: '痰湿质', description: '痰湿凝聚，以形体肥胖、腹部肥满、口黏苔腻、痰湿。' },
  { name: '湿热质', description: '湿热内蕴，以面垢油光、口苦、苔黄腻、湿热。' },
  { name: '血瘀质', description: '血行不畅，以肤色晦暗、舌质紫暗、血瘀。' },
  { name: '气郁质', description: '气机郁滞，以神情抑郁、忧虑脆弱、气郁。' },
  { name: '特禀质', description: '先天失常，以生理缺陷、过敏反应。' }
]

// 用于同步显示的茶饮推荐数据
const teaRecommendationData = [
  { name: '绿茶', description: '适合平和质者饮用清爽的绿茶，可帮助保持体内平衡。' },
  { name: '红茶', description: '适合气虚质者饮用温补红茶，具有温中散寒的功效。' },
  { name: '生姜红茶', description: '适合阳虚质者饮用生姜红茶，帮助温阳散寒。' },
  { name: '菊花茶', description: '适合阴虚质者饮用菊花茶，有滋阴清热作用。' },
  { name: '普洱茶', description: '适合痰湿质者饮用普洱茶，帮助化湿消脂。' },
  { name: '乌龙茶', description: '适合湿热质者饮用乌龙茶，具有清热化湿作用。' },
  { name: '红枣茶', description: '适合血瘀质者饮用红枣茶，活血化瘀、养血补气。' },
  { name: '茉莉花茶', description: '适合气郁质者饮用茉莉花茶，疏肝解郁、安神。' },
  { name: '荔枝红茶', description: '适合特禀质者饮用荔枝红茶，可改善过敏体质。' }
]

// 当前轮播索引
const currentDiamondIndex = ref(0)
let timer = null

// 切换到下一项
const nextDiamond = () => {
  currentDiamondIndex.value = (currentDiamondIndex.value + 1) % diamondData.length
}

// 鼠标悬停时暂停轮播
const pauseCarousel = () => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}

// 鼠标离开时恢复轮播
const resumeCarousel = () => {
  if (!timer) {
    timer = setInterval(nextDiamond, 2000)
  }
}

// 挂载时启动定时器，每1.5秒切换
onMounted(() => {
  timer = setInterval(nextDiamond, 2000)
})

// 卸载时清除定时器
onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  padding: 0px;
  background: linear-gradient(135deg, #1a1f2c 0%, #2d3748 100%);
  color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-family: 'Arial', sans-serif;
}

.nav-bar {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-title {
  font-size: 28px;
  margin: 0;
  color: #00FFFF;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.main-content {
  width: 95%;
  max-width: 1400px;
  margin: 0 auto;
  margin-bottom: 10px;
  position: relative;
  top: -5vh; /* 向上偏移视口高度 */
}

.content-layout {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 200px;
}

.left-content {
  flex: 1.2;
  text-align: left;
  padding-left: 2%;
}

.right-content {
  flex: 0.8;
  display: flex;
  justify-content: flex-end;
  padding-right: 2%;
}

.title-section {
  margin-top: 12vh;
  margin-bottom: 50px;
  text-align: center;
}

.main-title1 {
  font-size: 80px;
  font-weight: bold;
  margin: 0 0 20px;
  text-align: left;
  background: linear-gradient(45deg, #f8e8ba, #d09d54);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  animation: titleFadeIn 1s ease-in-out;
  font-family: 'STXingkai', 'Arial', sans-serif;
  letter-spacing: 1px;
}
.main-title2 {
  font-size: 80px;
  font-family: 'STXingkai', 'Arial', sans-serif;
  letter-spacing: 1px;
  font-weight: bold;
  margin: 0 0 20px;
  text-align: right;
  background: linear-gradient(45deg, #f8e8ba, #d09d54);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  animation: titleFadeIn 1s ease-in-out;
}
@keyframes titleFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.subtitle {
  font-size: 28px; /* 原来为24px，这里调大为28px */
  color: #e6e6e6;
  margin: 0px 0;
  line-height: 1.8;
  text-indent: 2em;  /* 添加首行缩进 */
  text-align: justify;  /* 文本两端对齐 */
  animation: subtitleFadeIn 1s ease-in-out 0.2s forwards;
  opacity: 0;
}

@keyframes subtitleFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.diamond-layout {
  position: relative;
  width: 480px;
  height: 480px;
  margin: 40px 0 40px auto;
  animation: diamondButtonsFadeIn 1s ease-in-out 0.4s forwards;
  opacity: 0;
}

@keyframes diamondButtonsFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.diamond-button {
  width: 170px;
  height: 170px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
  transform: rotate(45deg);
  cursor: pointer;
  transition: all 0.4s ease;
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 定位四个菱形 */
.diamond-button.top {
  top: 5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.diamond-button.left {
  top: 50%;
  left: 5px;
  transform: translateY(-50%) rotate(45deg);
}

.diamond-button.right {
  top: 50%;
  right: 5px;
  transform: translateY(-50%) rotate(45deg);
}

.diamond-button.bottom {
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.diamond-button:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform-origin: center;
  transform: rotate(45deg) scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.diamond-button.top:hover {
  transform: translateX(-50%) rotate(45deg) scale(1.1);
}

.diamond-button.left:hover {
  transform: translateY(-50%) rotate(45deg) scale(1.1);
}

.diamond-button.right:hover {
  transform: translateY(-50%) rotate(45deg) scale(1.1);
}

.diamond-button.bottom:hover {
  transform: translateX(-50%) rotate(45deg) scale(1.1);
}

/* 中央内容 */
.center-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  z-index: 1;
}

.center-diamond {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.2) 0%, rgba(255, 0, 255, 0.2) 100%);
  transform: rotate(45deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.center-diamond h2, .center-diamond p {
  transform: rotate(-45deg);
  text-align: center;
  color: #fff;
}

.center-diamond h2 {
  font-size: 26px;
  margin-bottom: 10px;
  background: linear-gradient(45deg, #f8e8ba, #d09d54);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.center-diamond p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

.diamond-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 100%;
  text-align: center;
  padding: 20px;
}

.diamond-content h3 {
  font-size: 22px;
  margin-bottom: 12px;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  background: linear-gradient(45deg, #f8e8ba, #d09d54);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.diamond-content p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

@media (max-width: 1200px) {
  .content-layout {
    gap: 40px;
  }
  
  .diamond-layout {
    width: 420px;
    height: 420px;
    margin: 30px 0 30px auto;
  }
  
  .diamond-button {
    width: 140px;
    height: 140px;
  }
  
  .center-content {
    width: 180px;
    height: 180px;
  }
  
  .diamond-content h3 {
    font-size: 20px;
  }
  
  .diamond-content p {
    font-size: 13px;
  }
  
  .center-diamond h2 {
    font-size: 22px;
  }
  
  .center-diamond p {
    font-size: 14px;
  }
  
  .main-title {
    font-size: 56px;
  }
  
  .subtitle {
    font-size: 24px;
  }
}

@media (max-width: 992px) {
  .content-layout {
    flex-direction: column;
    gap: 30px;
  }
  
  .left-content, .right-content {
    flex: none;
    width: 100%;
    padding: 0;
  }
  
  .diamond-layout {
    margin: 30px auto;
  }
  
  .main-title1, .main-title2 {
    font-size: 48px;
  }
}

@media (max-width: 768px) {
  .diamond-layout {
    width: 350px;
    height: 350px;
  }
  
  .diamond-button {
    width: 110px;
    height: 110px;
  }
  
  .center-content {
    width: 150px;
    height: 150px;
  }
  
  .diamond-content h3 {
    font-size: 18px;
  }
  
  .diamond-content p {
    font-size: 12px;
  }
  
  .center-diamond h2 {
    font-size: 20px;
  }
  
  .center-diamond p {
    font-size: 13px;
  }
  
  .main-title {
    font-size: 42px;
  }
  
  .subtitle {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .diamond-layout {
    width: 280px;
    height: 280px;
  }
  
  .diamond-button {
    width: 85px;
    height: 85px;
  }
  
  .center-content {
    width: 120px;
    height: 120px;
  }
  
  .diamond-content h3 {
    font-size: 16px;
    margin-bottom: 5px;
  }
  
  .diamond-content p {
    font-size: 10px;
  }
  
  .center-diamond h2 {
    font-size: 18px;
    margin-bottom: 5px;
  }
  
  .center-diamond p {
    font-size: 12px;
  }
  
  .main-title {
    font-size: 36px;
  }
  
  .subtitle {
    font-size: 18px;
  }
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.6s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.footer {
  width: 100%;
  text-align: center;
  padding: 10px 0;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
  color: #e6e6e6;
  font-size: 16px;
  margin-top: 50px;
}
</style>